<!-- 可编辑的【表格】  -->

<template>
  <div class="tableContain tableFormClass">

    <!-- 批量填充开始 -->
    <div
      style="margin-bottom: 10px; display: flex;"
      v-if="showType != 'tableNotEdit'"
      class="plInput"
    >
      <el-select
        style="margin-right: 10px"
        v-model="lotFillParam"
        size="mini"
        @change="lotFillChange"
        value-key="paramName"
        :disabled="showState != 0"
      >
        <template v-for="item in tableHeader">
          <el-option
            v-if="item.operateType == 'batchEdit'"
            :key="item.paramName"
            :label="item.title"
            :value="item"
          ></el-option>
        </template>
      </el-select>
      <template v-if="lotFillParam.type == 'dateTime'">
        <el-date-picker
          size="mini"
          v-model="lotFillValue"
          type="date"
          placeholder="选择日期时间"
          align="right"
          :editable="false"
          value-format="yyyy-MM-dd"
          :disabled="showState != 0"
        ></el-date-picker>
      </template>

      <template v-else-if="lotFillParam.type == 'radio'">
        <el-radio v-model="lotFillValue" :label="0" :disabled="showState != 0">否</el-radio>
        <el-radio v-model="lotFillValue" :label="1" :disabled="showState != 0">是</el-radio>
      </template>
      <template v-else-if="lotFillParam.type == 'dataSelect'">
        <div style="position: relative">
          <el-select
            v-model="lotFillValueFS"
            filterable
            remote
            :remote-method="remoteFilMethod"
            :loading="loading"
            @focus="focusFilter"
            @visible-change="visibleChange"
            @change="returnData1"
            value-key="name"
            :disabled="showState != 0"
          >
            <!-- 下拉的表头 -->
            <div class="headerTr">
              <template v-for="item in selectHeader">
                <div
                  v-if="item.type != 'null'"
                  class="selectHeaderClass"
                  :key="item.tableValue"
                >{{ item.title }}</div>
              </template>
            </div>
            <!-- 下拉的内容 -->
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.name"
              :value="item"
              class="optionContain"
            >
              <div class="selectTr">
                <template v-for="item1 in selectHeader">
                  <div
                    class="selectTd"
                    v-if="item1.type != 'null'"
                    :key="item1.tableValue"
                  >{{ item[item1.tableValue] }}</div>
                </template>
              </div>
            </el-option>
          </el-select>
          <span class="el-icon-search searchIcon" @click="openDialog1(lotFillParam)"></span>
        </div>
      </template>

      <!-- 下拉选择器 baseSelect -->
      <template v-else-if="lotFillParam.type == 'baseSelect' || 
      lotFillParam.type == 'select' ">
        <el-select v-model="lotFillValue" :disabled="showState != 0">
          <el-option
            :label="item1.title"
            :value="item1.value"
            v-for="item1 in lotFillParam.selectItems"
            :key="item1.title"
          ></el-option>
        </el-select>
        <!-- <span
          class="el-icon-circle-plus-outline"
          @click="openDialog(lotFillParam)"
          style="margin-top:3px;margin-left:8px;color:#30a7d6;font-size:25px"
        ></span>-->
        <!-- <span
          class="el-icon-circle-plus-outline searchIcon"
          v-if="item.lockValue != null && item.openUrl != null && showState != 0"
        ></span>-->
      </template>

      <template v-else-if="lotFillParam.type == 'dateRange'">
        <el-date-picker
          v-model="lotFillValue"
          type="daterange"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          range-separator="-"
          start-placeholder="开始"
          end-placeholder="结束"
          style="width:220px"
          :disabled="showState != 0"
        ></el-date-picker>
      </template>

      <template v-else>
        <el-input
          class="inputText"
          v-model="lotFillValue"
          type="text"
          size="mini"
          placeholder="请输入数据"
          :disabled="showState != 0"
        ></el-input>
      </template>
      <div style="width:auto;margin-top:3px;margin-bottom:3px;height:30px;margin-left:50px">
        <el-button type="primary" size="small" @click="fillClick" :disabled="showState != 0">批量填充</el-button>
        <el-button
          type="primary"
          size="small"
          :disabled="showState != 0"
          v-if="showType == 'tablePostData'"
          @click="newChatProtect()"
        >生成检验项目</el-button>
      </div>
      <div
        style="width:100px;margin-top:3px;margin-bottom:3px;height:30px;margin-left:10px"
        v-show="habitUrl"
      >
        <el-button type="primary" size="small" @click="OpenField()">选择显示字段</el-button>
        <!-- <el-button type="primary" size="small" v-show="rowState" @click="AutoRows()">自动折行</el-button> -->
      </div>
      <div v-show="rowState" style="width:100px;margin-top:3px;margin-bottom:3px;height:30px;margin-left:10px">
        <el-button type="primary" size="small"  @click="AutoRows()">自动折行</el-button>
      </div>
    </div>
    <!--选择显示的字段按钮-->

    <!-- 批量填充结束 -->
    <!-- 新增行、复制行、结束行 -->
    <div
      class="btnList"
      v-if="showType != 'tableNotAdd' && showType != 'tableGetData' && showType != 'tableNotEdit' && showType !='tableSelectEdit'
      && showType !='tableAttach'"
    >
      <el-button type="primary" size="mini" @click="addRow">新增行</el-button>
      <el-button type="success" size="mini" @click="copyRow">复制行</el-button>
      <el-button type="warning" size="mini" @click="deleteRow">删除行</el-button>
    </div>

    <!-- 明细部分 -->
    <el-form
      ref="editFormRef"
      label-width="120px"
      size="mini"
      :inline="true"
      :model="formTable"
      class="tableLineClass"
    >
      <el-table
        border
        use-virtual
        :data="formTable.tableData"
        highlight-current-row
        style="width: 100%"
        max-height="350"
        @select="selectTdClick"
        @select-all="selectAllClick"
        @row-click="rowClick"
        :empty-text="emptyText"
        ref="table"
        :header-cell-style="{ background: '#e6eaf3', color: '#000' }"
        :cell-style="cellStyle"
        :class="maxRow? 'rowArea':''"
      >
        <!-- v-if="openType == 'list'||openType == 'groupList'||openType == 'edit'" -->
        <el-table-column type="selection" width="36"></el-table-column>
        <el-table-column type="index" label="序号" width="50" fixed></el-table-column>
        <template v-for="item1 in tableHeader">
          <!-- :min-width="item1.type == 'dateRange' ? '220':'120'" -->

          <el-table-column
            :show-overflow-tooltip="true"
            :prop="item1.paramName"
            :key="item1.paramName"
            :label="item1.title"
            :min-width="item1.width"
            v-if="item1.type != 'null' && item1.hidden == '0' && item1.titleItems == null"
            :fixed="item1.freeze =='1'? true:false"
          >
            <template slot="header" scope-scope="scope">
              <span class="star" v-if="!item1.null">*</span>
              <span class="starName">{{ item1.title }}</span>
              <popover
                ref="popoverRef"
                :property="item1.paramName"
                :checkList="checkList"
                @selectChange="selectChange"
                @resetChange="resetChange"
              ></popover>
            </template>

            <!-- 判断单元格是否可编辑（是什么样的编辑类型） -->
            <template slot-scope="scope">
              <template v-if="item1.allow && showState == 0">
                <el-form-item
                  :prop="'tableData.' + scope.$index + '.' + item1.paramName"
                  :key="scope.row.key"
                >
                  <!-- image -->
                  <template v-if="item1.type == 'image'">
                    <div style="text-align:center;color:blue">
                      <span
                        v-if="scope.row[scope.column.property]"
                        @click="openImage(scope.row[scope.column.property],scope.row)"
                      >【查看图片】</span>
                      <span
                        v-else-if="!scope.row[scope.column.property]"
                        @click="putImage(item1.actionUrl,scope.row)"
                      >上传</span>
                    </div>
                  </template>

                  <!-- 文本 -->
                  <el-input
                    class="tableinput"
                    type="text"
                    v-model="scope.row[scope.column.property]"
                    :disabled="!item1.allow"
                    v-if="item1.type == 'text'"
                    :maxLength="item1.maxLength"
                  ></el-input>

                  <!-- 多行文本 -->
                  <el-input
                    class="tableinput"
                    type="textarea"
                    :autosize="{maxRows:20}"
                    v-model="scope.row[scope.column.property]"
                    :disabled="!item1.allow"
                    v-else-if="item1.type == 'textarea'"
                    :maxLength="item1.maxLength"
                  ></el-input>

                  <!-- 整数 -->
                  <el-input
                    class="tableinput"
                    type="number"
                    v-model.number="scope.row[scope.column.property]"
                    :disabled="!item1.allow"
                    v-else-if="item1.type == 'int'"
                    :maxLength="item1.maxLength"
                    min="1"
                  ></el-input>

                  <!-- 小数  -->
                  <el-input
                    class="tableinput"
                    type="number"
                    v-model.number="scope.row[scope.column.property]"
                    :disabled="!item1.allow"
                    v-else-if="item1.type == 'float'"
                    :maxLength="item1.maxLength"
                    min="0"
                  ></el-input>

                  <el-date-picker
                    v-model="scope.row[scope.column.property]"
                    v-else-if="item1.type == 'dateRange' && scope.row[scope.column.property][0] !='false'"
                    type="daterange"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    range-separator="-"
                    start-placeholder="开始"
                    end-placeholder="结束"
                    :disabled="!item1.allow"
                    class="dateRange"
                    style="width:200px;padding:0"
                  ></el-date-picker>

                  <!-- 密码 -->
                  <el-input
                    class="tableinput"
                    type="password"
                    v-model="scope.row[scope.column.property]"
                    :disabled="!item1.allow"
                    v-else-if="item1.type == 'password'"
                  ></el-input>

                  <!-- 小窗口 -->
                  <template v-else-if="item1.type == 'dataSelect'">
                    <template v-if="item1.operateType == 'selectMany'">
                      <el-input
                        class="tableinput"
                        v-model="scope.row[scope.column.property]"
                        disabled
                      >
                        <i
                          slot="suffix"
                          class="el-icon-search"
                          style="
                            color: #30a7d6;
                            font-weight: 700;
                            font-size: 14px;
                          "
                          @click="openDialog(item1, scope.$index, scope.row)"
                          v-if="item1.allow"
                        ></i>
                      </el-input>
                    </template>

                    <template v-else>
                      <el-select
                        v-model="scope.row[scope.column.property]"
                        filterable
                        remote
                        :remote-method="remoteMethod"
                        :loading="loading"
                        @focus="focusInput(item1, scope.$index)"
                        @visible-change="visibleChange"
                        @change="returnData"
                        value-key="name"
                        :disabled="!item1.allow"
                      >
                        <div class="headerTr">
                          <template v-for="item in selectHeader">
                            <div
                              v-if="item.type != 'null'"
                              class="selectHeaderClass"
                              :key="item.tableValue"
                            >{{ item.title }}</div>
                          </template>
                        </div>
                        <el-option
                          v-for="item in options"
                          :key="item.id"
                          :label="item.code"
                          :value="item"
                          class="optionContain"
                        >
                          <div class="selectTr">
                            <template v-for="item1 in selectHeader">
                              <div
                                class="selectTd"
                                v-if="item1.type != 'null'"
                                :key="item1.tableValue"
                              >{{ item[item1.tableValue] }}</div>
                            </template>
                          </div>
                        </el-option>
                      </el-select>
                      <span
                        class="el-icon-search searchIcon"
                        @click="openDialog(item1, scope.$index, scope.row)"
                        v-if="item1.allow && showState == 0"
                      ></span>
                    </template>
                    
                  </template>

                  <!-- 下拉选择器 baseSelect -->
                  <template v-else-if="item1.type == 'baseSelect'">
                    <el-select
                      v-model="scope.row[scope.column.property]"
                      @change="changeTableClick($event, item1, scope.$index, scope.row)"
                      :disabled="!item1.allow "
                    >
                      <el-option
                        :label="item2.title"
                        :value="item2.value"
                        v-for="item2 in item1.selectItems"
                        :key="item2.value"
                      ></el-option>
                    </el-select>
                    <span
                      class="el-icon-circle-plus-outline searchIcon"
                      @click="openDialog(item1, scope.$index, scope.row)"
                      v-if="showState == 0"
                    ></span>
                  </template>

                  <!-- 带出的数据填充框 -->
                  <template v-else-if="item1.type == 'dataSelectSub'">
                    <p>{{ scope.row[scope.column.property] }}</p>
                  </template>

                  <!-- 多选辅助班组弹出框 -->
                  <template v-else-if="item1.type == 'checkSelect'">
                    <el-input v-model="scope.row[scope.column.property]" disabled style="width: 100px;" />
                    <span
                      class="el-icon-circle-plus-outline searchIcon"
                      @click="openDialog(item1, scope.$index, scope.row)"
                      v-if="showState == 0"
                    ></span>
                  </template>

                  <!-- 单选按钮 -->
                  <template v-else-if="item1.type == 'radio'">
                    <!-- 单选框的数字类型 -->
                    <el-checkbox
                      v-if="typeof scope.row[scope.column.property] == 'number'"
                      v-model="scope.row[scope.column.property]"
                      :true-label="1"
                      :false-label="0"
                      :disabled="!item1.allow"
                    ></el-checkbox>
                    <!-- 单选框的字符串类型 -->
                    <el-checkbox
                      v-else
                      v-model="scope.row[scope.column.property]"
                      true-label="1"
                      false-label="0"
                      :disabled="!item1.allow"
                    ></el-checkbox>
                  </template>

                  <!-- 下拉选择器 -->
                  <el-select
                    v-else-if="item1.type == 'select'"
                    v-model="scope.row[scope.column.property]"
                    :disabled="!item1.allow"
                    @change="changeTableClick($event, item1, scope.$index, scope.row)"
                  >
                    <el-option
                      :label="item2.title"
                      :value="item2.value"
                      v-for="item2 in item1.selectItems"
                      :key="item2.title"
                    ></el-option>
                  </el-select>

                  <!--quickSelect-->
                  <template v-else-if="item1.type == 'quickSelect'">
                    <template>
                      <el-select
                        v-model="scope.row[scope.column.property]"
                        filterable
                        remote
                        :remote-method="remoteMethod"
                        :loading="loading"
                        @focus="focusInput(item1,scope.$index)"
                        @visible-change="visibleChange"
                        @change="returnquickData"
                        value-key="name"
                        :disabled="!item1.allow"
                      >
                        <!-- 下拉的表头 -->
                        <div class="headerTr">
                          <template v-for="item4 in selectHeader">
                            <div
                              v-if="item4.type != 'null'"
                              class="selectHeaderClass"
                              :key="item4.tableValue"
                            >{{ item4.title }}</div>
                          </template>
                        </div>
                        <!-- 下拉的内容 -->
                        <el-option
                          v-for="item5 in options"
                          :key="item5.id"
                          :label="item5.code"
                          :value="item5"
                          class="optionContain"
                        >
                          <div class="selectTr">
                            <template v-for="item6 in selectHeader">
                              <div
                                class="selectTd"
                                v-if="item6.type != 'null'"
                                :key="item6.tableValue"
                              >{{ item5[item6.tableValue] }}</div>
                            </template>
                          </div>
                        </el-option>
                      </el-select>
                    </template>
                  </template>

                  <el-date-picker
                    v-else-if="item1.type == 'dateTime'"
                    v-model="scope.row[scope.column.property]"
                    type="date"
                    :placeholder="item1.allow ? '选择日期' : ''"
                    :disabled="!item1.allow"
                  ></el-date-picker>

                  <el-date-picker
                    v-else-if="item1.type == 'dateTime3'"
                    v-model="scope.row[scope.column.property]"
                    type="datetime"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    format="yyyy-MM-dd HH:mm"
                    :placeholder="item1.allow ? '选择日期时间' : ''"
                    :disabled="!item1.allow"
                  ></el-date-picker>

                  <!-- null型 
                    value-format="yyyy-MM-dd hh:mm:ss" -->
                  <el-input
                    class="inputNull"
                    v-else-if="item1.type == 'null'"
                    v-model="scope.row[scope.column.property]"
                    disabled
                  ></el-input>
                </el-form-item>
              </template>
              <template v-else>
                <template v-if="item1.type == 'radio'">
                  <!-- 单选框的数字类型 -->
                  <el-checkbox
                    class="NotAllowClass"
                    v-if="typeof scope.row[scope.column.property] == 'number'"
                    v-model="scope.row[scope.column.property]"
                    :true-label="1"
                    :false-label="0"
                    :disabled="!item1.allow"
                  ></el-checkbox>
                  <!-- 单选框的字符串类型 -->
                  <el-checkbox
                    class="NotAllowClass"
                    v-else
                    v-model="scope.row[scope.column.property]"
                    true-label="1"
                    false-label="0"
                    :disabled="!item1.allow"
                  ></el-checkbox>
                </template>
                <!-- 多行文本 -->
                <el-input
                  style="overflow:hidden;"
                  class="tableinput"
                  type="textarea"
                  :autosize="{maxRows:20}"
                  v-model="scope.row[scope.column.property]"
                  :disabled="!item1.allow"
                  v-else-if="item1.type == 'textarea'"
                  :maxLength="item1.maxLength"
                ></el-input>
                <p v-else>{{ scope.row[scope.column.property] }}</p>
              </template>
            </template>
          </el-table-column>
          <el-table-column
            :show-overflow-tooltip="true"
            :prop="item1.paramName"
            :key="item1.paramName"
            :label="item1.title"
            :min-width="item1.width"
            v-if="item1.type != 'null' && item1.hidden == '0' && item1.titleItems != null"
            :fixed="item1.freeze =='1'? true:false"
          >
            <el-table-column
              v-show="item1.titleItems"
              :label="item2.title"
              :prop="item2.paramName"
              :min-width="item1.width"
              v-for="item2 in item1.titleItems"
              :key="item2.paramName"
            >
              <template slot="header" scope-scope="scope">
                <span class="star" v-if="!item2.null">*</span>
                <span class="starName">{{ item2.title }}</span>
                <popover
                  ref="popoverRef"
                  :property="item2.paramName"
                  :checkList="checkList"
                  @selectChange="selectChange"
                  @resetChange="resetChange"
                ></popover>
              </template>

              <!-- 判断单元格是否可编辑（是什么样的编辑类型） -->
              <template slot-scope="scope">
                <template v-if="item2.allow && showState == 0">
                  <el-form-item
                    :prop="'tableData.' + scope.$index + '.' + item1.paramName"
                    :key="scope.row.key"
                  >
                    <template v-if="item2.type == 'comboFloat'">
                      <div>
                        <el-input
                          class="tableinput"
                          type="number"
                          v-model="scope.row[item1.paramName]"
                          @change="test(scope.row,item1.paramName)"
                          :disabled="!item2.allow"
                          :maxLength="item2.maxLength"
                          style="width:100px;margin-bottom:10px;margin-top:5px"
                        ></el-input>
                      </div>
                      <div>
                        <el-input
                          class="tableinput"
                          type="number"
                          v-model="scope.row[scope.column.property]"
                          @change="test(scope.row,scope.column)"
                          :disabled="!item2.allow"
                          :maxLength="item2.maxLength"
                          style="width:100px"
                        ></el-input>
                      </div>
                    </template>
                    <!-- image -->
                    <template v-if="item2.type == 'image'">
                      <div style="text-align:center;color:blue">
                        <span
                          v-if="scope.row[scope.column.property]"
                          @click="openImage(scope.row[scope.column.property],scope.row)"
                        >查看</span>
                        <span
                          v-else-if="!scope.row[scope.column.property]"
                          @click="putImage(item2.actionUrl,scope.row)"
                        >上传</span>
                      </div>
                    </template>

                    <!-- 文本 -->
                    <el-input
                      class="tableinput"
                      type="text"
                      v-model="scope.row[scope.column.property]"
                      :disabled="!item2.allow"
                      v-if="item2.type == 'text'"
                      :maxLength="item2.maxLength"
                    ></el-input>

                    <!-- 多行文本 -->
                    <el-input
                      class="tableinput"
                      type="textarea"
                      :autosize="{maxRows:20}"
                      v-model="scope.row[scope.column.property]"
                      :disabled="!item1.allow"
                      v-else-if="item1.type == 'textarea'"
                      :maxLength="item1.maxLength"
                    ></el-input>

                    <!-- 整数 -->
                    <el-input
                      class="tableinput"
                      type="number"
                      v-model.number="scope.row[scope.column.property]"
                      :disabled="!item2.allow"
                      v-else-if="item2.type == 'int'"
                      :maxLength="item2.maxLength"
                      min="1"
                    ></el-input>

                    <!-- 小数 -->
                    <el-input
                      class="tableinput"
                      type="number"
                      v-model.number="scope.row[scope.column.property]"
                      :disabled="!item2.allow"
                      v-else-if="item2.type == 'float'"
                      :maxLength="item2.maxLength"
                      min="0"
                    ></el-input>

                    <el-date-picker
                      v-model="scope.row[scope.column.property]"
                      v-else-if="item2.type == 'dateRange' && scope.row[scope.column.property][0] !='false'"
                      type="daterange"
                      format="yyyy-MM-dd"
                      value-format="yyyy-MM-dd"
                      range-separator="-"
                      start-placeholder="开始"
                      end-placeholder="结束"
                      :disabled="!item2.allow"
                      class="dateRange"
                      style="width:200px;padding:0"
                    ></el-date-picker>

                    <!-- 密码 -->
                    <el-input
                      class="tableinput"
                      type="password"
                      v-model="scope.row[scope.column.property]"
                      :disabled="!item2.allow"
                      v-else-if="item2.type == 'password'"
                    ></el-input>

                    <!-- 小窗口 -->
                    <template v-else-if="item2.type == 'dataSelect'">
                      <!-- 多选 -->
                      <template v-if="item2.operateType == 'selectMany'">
                        <el-input
                          class="tableinput"
                          v-model="scope.row[scope.column.property]"
                          disabled
                        >
                          <i
                            slot="suffix"
                            class="el-icon-search"
                            style="
                            color: #30a7d6;
                            font-weight: 700;
                            font-size: 14px;
                          "
                            @click="openDialog(item2, scope.$index, scope.row)"
                            v-if="item2.allow"
                          ></i>
                        </el-input>
                      </template>

                      <!-- 单选 -->
                      <template v-else>
                        <el-select
                          v-model="scope.row[scope.column.property]"
                          filterable
                          remote
                          :remote-method="remoteMethod"
                          :loading="loading"
                          @focus="focusInput(item2, scope.$index)"
                          @visible-change="visibleChange"
                          @change="returnData"
                          value-key="name"
                          :disabled="!item2.allow"
                        >
                          <!-- 下拉的表头 -->
                          <div class="headerTr">
                            <template v-for="item in selectHeader">
                              <div
                                v-if="item.type != 'null'"
                                class="selectHeaderClass"
                                :key="item.tableValue"
                              >{{ item.title }}</div>
                            </template>
                          </div>
                          <!-- 下拉的内容 -->
                          <el-option
                            v-for="item in options"
                            :key="item.id"
                            :label="item.code"
                            :value="item"
                            class="optionContain"
                          >
                            <div class="selectTr">
                              <template v-for="item2 in selectHeader">
                                <div
                                  class="selectTd"
                                  v-if="item2.type != 'null'"
                                  :key="item2.tableValue"
                                >{{ item[item2.tableValue] }}</div>
                              </template>
                            </div>
                          </el-option>
                        </el-select>
                        <span
                          class="el-icon-search searchIcon"
                          @click="openDialog(item2, scope.$index, scope.row)"
                          v-if="item2.allow && showState == 0"
                        ></span>
                      </template>
                    </template>

                    <!-- 下拉选择器 baseSelect -->
                    <template v-else-if="item2.type == 'baseSelect'">
                      <el-select
                        v-model="scope.row[scope.column.property]"
                        @change="changeTableClick($event, item2, scope.$index, scope.row)"
                        :disabled="!item2.allow "
                      >
                        <el-option
                          :label="item2.title"
                          :value="item2.value"
                          v-for="item2 in item2.selectItems"
                          :key="item2.value"
                        ></el-option>
                      </el-select>
                      <span
                        class="el-icon-circle-plus-outline searchIcon"
                        @click="openDialog(item2, scope.$index, scope.row)"
                        v-if="showState == 0"
                      ></span>
                    </template>

                    <!-- 带出的数据填充框 -->
                    <template v-else-if="item2.type == 'dataSelectSub'">
                      <p>{{ scope.row[scope.column.property] }}</p>
                    </template>

                    <!-- 单选按钮 -->
                    <template v-else-if="item2.type == 'radio'">
                      <!-- 单选框的数字类型 -->
                      <el-checkbox
                        v-if="typeof scope.row[scope.column.property] == 'number'"
                        v-model="scope.row[scope.column.property]"
                        :true-label="1"
                        :false-label="0"
                        :disabled="!item2.allow"
                      ></el-checkbox>
                      <!-- 单选框的字符串类型 -->
                      <el-checkbox
                        v-else
                        v-model="scope.row[scope.column.property]"
                        true-label="1"
                        false-label="0"
                        :disabled="!item2.allow"
                      ></el-checkbox>
                    </template>

                    <!-- 下拉选择器 -->
                    <el-select
                      v-else-if="item2.type == 'select'"
                      v-model="scope.row[scope.column.property]"
                      :disabled="!item.allow"
                      @change="changeTableClick($event, item2, scope.$index, scope.row)"
                    >
                      <el-option
                        :label="item2.title"
                        :value="item2.value"
                        v-for="item2 in item2.selectItems"
                        :key="item2.title"
                      ></el-option>
                    </el-select>

                    <!--quickSelect-->
                    <template v-else-if="item2.type == 'quickSelect'">
                      <template>
                        <el-select
                          v-model="scope.row[scope.column.property]"
                          filterable
                          remote
                          :remote-method="remoteMethod"
                          :loading="loading"
                          @focus="focusInput(item2,scope.$index)"
                          @visible-change="visibleChange"
                          @change="returnquickData"
                          value-key="name"
                          :disabled="!item2.allow"
                        >
                          <!-- 下拉的表头 -->
                          <div class="headerTr">
                            <template v-for="item4 in selectHeader">
                              <div
                                v-if="item4.type != 'null'"
                                class="selectHeaderClass"
                                :key="item4.tableValue"
                              >{{ item4.title }}</div>
                            </template>
                          </div>
                          <!-- 下拉的内容 -->
                          <el-option
                            v-for="item5 in options"
                            :key="item5.id"
                            :label="item5.code"
                            :value="item5"
                            class="optionContain"
                          >
                            <div class="selectTr">
                              <template v-for="item6 in selectHeader">
                                <div
                                  class="selectTd"
                                  v-if="item6.type != 'null'"
                                  :key="item6.tableValue"
                                >{{ item5[item6.tableValue] }}</div>
                              </template>
                            </div>
                          </el-option>
                        </el-select>
                      </template>
                    </template>

                    <el-date-picker
                      v-else-if="item2.type == 'dateTime'"
                      v-model="scope.row[scope.column.property]"
                      type="date"
                      :placeholder="item2.allow ? '选择日期' : ''"
                      :disabled="!item2.allow"
                    ></el-date-picker>

                    <!-- null型 -->
                    <el-input
                      class="inputNull"
                      v-else-if="item2.type == 'null'"
                      v-model="scope.row[scope.column.property]"
                      disabled
                    ></el-input>
                  </el-form-item>
                </template>
                <template v-else>
                  <template v-if="item2.type == 'radio'">
                    <!-- 单选框的数字类型 -->
                    <el-checkbox
                      class="NotAllowClass"
                      v-if="typeof scope.row[scope.column.property] == 'number'"
                      v-model="scope.row[scope.column.property]"
                      :true-label="1"
                      :false-label="0"
                      :disabled="!item1.allow"
                    ></el-checkbox>
                    <!-- 单选框的字符串类型 -->
                    <el-checkbox
                      class="NotAllowClass"
                      v-else
                      v-model="scope.row[scope.column.property]"
                      true-label="1"
                      false-label="0"
                      :disabled="!item1.allow"
                    ></el-checkbox>
                  </template>

                  <!-- comboText -->
                  <template v-else-if="item2.type == 'comboText'">
                    <div style="margin-left:30%">
                      <div>日班</div>
                      <div>加班</div>
                    </div>
                  </template>
                  <!-- 多行文本 -->
                  <el-input
                    style="overflow:hidden;"
                    class="tableinput"
                    type="textarea"
                    :autosize="{maxRows:20}"
                    v-model="scope.row[scope.column.property]"
                    :disabled="!item2.allow"
                    v-else-if="item2.type == 'textarea'"
                    :maxLength="item2.maxLength"
                  ></el-input>
                  <p v-else>{{ scope.row[scope.column.property] }}</p>
                </template>
              </template>
            </el-table-column>
          </el-table-column>
        </template>
      </el-table>
    </el-form>
        <!-- 底部分页区 -->
        <!-- <div class="buttomBox">
          <el-pagination
            :page-sizes="[10]"
            :page-size="pagingParam.pageSize"
            :current-page="pagingParam.pageIndex"
            :total="pagingParam.pageCount"
            layout="total, sizes, prev, pager, next, jumper"
            @current-change="handleCurrentChange"
          ></el-pagination>
        </div> -->

    <!-- 批量选择带出数据  -->
    <el-dialog
      :title="dialogTitle"
      center
      v-dialogDrag
      :append-to-body="true"
      :visible.sync="fillopenDialogVisible"
      v-if="fillopenDialogVisible"
      :width="'900px'"
      :before-close="dialogBeforeClose1"
    >
      <info-dialog
        :dataId="dataId"
        :actionObj="actionObj"
        :operateType="operateType"
        :unActionValue="unActionValue"
        :paramValue="paramValue"
        @returnData="returnData1"
        ref="infoDialogRefs1"
      ></info-dialog>
    </el-dialog>

    <!-- 弹窗带出数据 -->
    <el-dialog
      :title="dialogTitle"
      center
      v-dialogDrag
      :append-to-body="true"
      :visible.sync="openDialogVisible"
      v-if="openDialogVisible"
      :width="'900px'"
      :before-close="dialogBeforeClose"
    >
      <info-dialog
        :dataId="dataId"
        :actionObj="actionObj"
        :operateType="operateType"
        :unActionValue="unActionValue"
        :paramValue="paramValue"
        @returnData="returnData"
        ref="infoDialogRefs"
      ></info-dialog>
    </el-dialog>

    <!-- 多选辅助班组 -->
    <el-dialog
      :title="dialogTitle"
      center
      v-dialogDrag
      :append-to-body="true"
      :visible.sync="openDialogAssist"
      v-if="openDialogAssist"
      :before-close="dialogssistClose"
      :width="'600px'"
    >
      <el-button type="primary"  @click="sumbitTypeManageClick" 
      style="margin:10px;font-size: 20px;"
      >返回数据</el-button>
      <div>
        <el-checkbox :indeterminate="isIndeterminate" 
        v-model="checkAll" @change="handleCheckAllChange">全选
        </el-checkbox>

        <div style="width:560px;height:auto;">
          <el-checkbox-group v-model="auxiliaryTeamItem" @change="auxiliaryTeamChange" >
            <el-checkbox
                v-for="item in auxiliaryTeamList"
                v-model="item.selected"
                :label="item"
                :key="item.value"
                style="width:150px;"
              >{{item.title}}</el-checkbox>
          </el-checkbox-group>
          </div>
      </div>
    </el-dialog>

    <!--选择显示字段弹框-->
    <select-field
      ref="field"
      :HeaderData="tableHeader"
      :habitUrl="habitUrl"
      @commonClick="commonClick"
    ></select-field>

    <el-dialog
      title="上传图片"
      center
      :append-to-body="true"
      :visible.sync="openImageDaoRu"
      v-if="openImageDaoRu"
      width="400px"
    >
      <input type="file" ref="file" />
      <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
    </el-dialog>
    <el-dialog
      title="查看图片"
      center
      :append-to-body="true"
      :visible.sync="imageCon"
      v-if="imageCon"
      width="800px"
    >
      <el-button
        size="small"
        type="danger"
        @click="clearImage()"
        icon="el-icon-delete"
        style="margin-bottom:10px"
      >删除</el-button>
      <!-- <img :src="imgUrl" alt style="width:100%;height:100%" /> -->
      <el-image style="width: 100%; height: 100%" :src="baseUrl+imgUrl"></el-image>
    </el-dialog>
  </div>
</template>

<script>
import infoDialog from "./dialog/infoDialog.vue";
import { PlTable, PlTableColumn } from "pl-table";
import popover from "./input/popover.vue"; // 过滤组件
import SelectField from "./selectfield.vue";
export default {
  name: "tableform1",
  components: {
    infoDialog,
    PlTable,
    PlTableColumn,
    popover,
    SelectField
  },
  data() {
    return {
      auxiliaryTeamItem:[],
      //后端返回协助班组数组
      auxiliaryTeamList:[], 
      auxiliaryTeamName:'',
      isIndeterminate:true,
      checkAll:false,
      auxiliaryTeamIds:'',//已选择的协助班组Ids
      
      maxRow: false,
      rowState: false,
      baseSelectUrl: "",
      baseSelectName: "",
      sateColor: {},
      baseUrl: this.$imageUrl,
      importImageUrl: "",
      openImageDaoRu: false, //打开导入图片el-dialog
      imgUrl: "", //图片路径
      clearImgId: "", //删除某张图片的id
      imageCon: false, //查看图片弹窗
      quickValue: "",
      isShowTd: true, //【明细】 输入框与文本内容的切换显示
      editRules: [], //验证规则
      formTable: {
        tableData: this.tableData
      },
      dialogTitle: "", //弹出框的标题
      openDialogVisible: false, //对话框的显示与隐藏
      openDialogAssist:false, //协助班组对话框的显示与隐藏
      actionObj: null,
      actionValue: "", // 记录带出框的数据
      rowIndex: null, // 表格对应的行数
      orgData: null,
      selectRowList: [], //选中的表格数据
      dataId: null, //当前点击的行ID
      quickUrl: "", //输入框下拉选择内容
      // 批量修改
      fillQuickUrl: null,
      fillActionValue: "",
      fillopenDialogVisible: false,
      lotFillParam: {}, //字段
      lotFillValue: null, //填充值
      lotFillValueFS: null, // 携带

      options: "", //下拉选择器【多选的数据】
      loading: false,
      selectHeader: [],
      // 下拉多选
      operateType: null, //标记下拉多选

      // 表头过滤条件
      rules: {}, // 存放选中字段的过滤条件
      checkList: {}, // 存放每个字段的过滤条件
      paramValue: "",
      unActionValue: "",
      synValue: "", //
      number:'1', //input框的默认值为1

      pagingParam: {
        pageCount: null, //总数据量
        pageIndex: 1, //当前查询页
        pageNum: 1, //总页数
        pageSize: 10 //每页返回行数
      }, //页码数据对象
    };
  },
  props: {
    habitUrl: {
      type: String,
      default: ""
    },
    tableHeader: {
      //表头数据
      type: Array,
      default: () => {
        return [];
      }
    },
    tableData: {
      //表body数据
      type: Array,
      default: () => {
        return [];
      }
    },
    maxHeight: {
      // 表格高度 300
      type: Number,
      default: 300
    },
    openType: {
      type: String,
      default: ""
    },
    emptyText: {
      type: String,
      default: "暂无数据"
    },
    showType: {
      type: String,
      default: "table"
    },
    model: {
      type: Number,
      default: null
    },
    showState: {
      type: Number,
      default: 0
    }
  },
  created() {
    this.orgData = JSON.parse(sessionStorage.getItem("orgData"));
  },
  watch: {
    tableData: {
      handler(nav) {
        // console.log(nav)
        if (nav == null) {
          this.formTable.tableData = this.tableData;
        } else {
          this.$nextTick(() => {
            // 重新布局table数据
            this.$refs.table.doLayout();
            //对表格数据进行分页处理
            // if(this.showType != 'tableNotAdd' && this.showType != 'tablePostData'){
              this.formTable.tableData = nav;
            // }else{
            //   let index = this.pagingParam.pageIndex
            //   let number = 0
            //   if(index > 1){
            //     number = (index - 1)
            //   }
            //   this.formTable.tableData = nav.slice(number * 10,index * 10);
            //   this.pagingParam.pageCount = this.tableData.length //总数据数
            // }
          });
          // 监听表格，获取表头的过滤条件
          this.checkList = {};
          if (this.tableData.length != 0) {
            for (let k in this.tableData[0]) {
              // this.checkList[k] = [];
              this.$set(this.checkList, k, []); // 设置数组对象
            }
            for (let i in this.tableData) {
              for (let k in this.tableData[i]) {
                if (
                  this.checkList[k] &&
                  this.checkList[k].findIndex(
                    item => item == this.tableData[i][k]
                  ) == -1
                ) {
                  this.checkList[k].push(this.tableData[i][k]);
                }
              }
            }
          }
        }
      },
      immediate: true,
      deep: true
    },
    tableHeader: {
      immediate: true,
      deep: true,
      handler(val) {
        this.tableHeader = val;
        this.selectSatetColor();
      }
    },
    formTable: {
      immediate: true,
      deep: true,
      handler(val) {
        this.formTable = val;
      }
    }
  },
  mounted() {
    this.start();
    //console.log(this.tableHeader);
    this.tableHeader.forEach(item => {
      if (item.type == "textarea") {
        this.rowState = true;
        return;
      }
    });
    // if(this.showType == 'tableNotAdd' || this.showType == 'tablePostData'){
    //   this.createTableData()
    //   console.log(this.tableData);
    //   console.log(this.formTable);
    //   // console.log(this.pagingParam);
    // }
  },

  methods: {

    createTableData(){  //初始化数据时,将明细表格tableData进行分页
      let index = this.tableData.length
      let num = 0;
      num = Math.floor(index / 10);
      if(index % 10 > 0){
        num++;
      }
      if (index > 10) {
        this.formTable.tableData = this.tableData.slice(0, 10)
      }
      this.pagingParam.pageSize = 10 //每页返回页数
      this.pagingParam.pageIndex = 1 //当前查询页
      this.pagingParam.pageCount = this.tableData.length //总数据数
      this.pagingParam.pageNum = num;
      // console.log(index)
      // console.log(num)
      // console.log(this.showType)
      // console.log(this.formTable.tableData)
    },

    // 修改当前分页的状态
    editRow(number,type){
      let pageIndex = this.pagingParam.pageIndex
      let pageNum = this.pagingParam.pageNum
      let pageCount = this.pagingParam.pageCount
      if(pageIndex != pageNum){
        //改变当前页
        this.handleCurrentChange(pageNum);
      }
      let tableDataIndex = this.formTable.tableData.length;
      if(tableDataIndex <= 0){ //删除
        this.pagingParam.pageIndex = pageIndex - 1;
        this.pagingParam.pageNum = pageNum - 1;
        this.handleCurrentChange(this.pagingParam.pageIndex);
      }
      else if(tableDataIndex > 10){  //新增或者复制
        let tableData = this.formTable.tableData.slice(-1);
        this.formTable.tableData = JSON.parse(JSON.stringify(tableData));
        this.pagingParam.pageIndex = pageIndex + 1;
        this.pagingParam.pageNum = pageNum + 1;
      }
      if(type == 'add' ||type == 'copy'){ //新增或者复制
        this.pagingParam.pageCount = pageCount + 1;
      }else{ //删除
        this.pagingParam.pageCount = pageCount - number;
      }
      this.$nextTick(() => { 
        this.$refs.table.bodyWrapper.scrollTop = 999;
      });
      // console.log(this.pagingParam);
      // console.log(this.formTable.tableData);
      // console.log(this.tableData);
    },

    // 监听 页码值 改变的事件
    handleCurrentChange(newPage) {
      this.pagingParam.pageIndex = newPage;
      let oldPage = (newPage - 1) * 10;
      this.formTable.tableData =  this.tableData.slice(oldPage,newPage * 10);

      this.$nextTick(() => {
        this.$refs.table.bodyWrapper.scrollTop = 0;
      });
    },

    handleCheckAllChange(val){ //全选协助班组
      this.auxiliaryTeamItem = val ? this.auxiliaryTeamList : [];
      this.isIndeterminate = false;
    },

    sumbitTypeManageClick(){ //点击“返回数据”按钮，返回选中的协助班组
      console.log('返回选中的班组:');
      console.log(this.auxiliaryTeamItem);
      this.openDialogAssist = false;
      let auxiliaryTeam = {
        id:'',
        name:'',
      }
      this.auxiliaryTeamItem.forEach((item, index) => {
        if (item != '') {
          this.auxiliaryTeamName += item.title+",";
          auxiliaryTeam.id += item.value+",";
          auxiliaryTeam.name += item.title+",";
        }
      });
      auxiliaryTeam.id = auxiliaryTeam.id.slice(0,-1);
      auxiliaryTeam.name = auxiliaryTeam.name.slice(0,-1);
      this.auxiliaryTeamIds = auxiliaryTeam.id;
      this.returnData(auxiliaryTeam);
    },

    auxiliaryTeamChange(res){ //返回每次多选中的协助数据
      console.log(res);
      this.auxiliaryTeamItem = res;
    },

    dialogssistClose() { // 关闭协助班组对话框模块
      this.openDialogAssist = false;
      this.auxiliaryTeamItem = [];
    },

    inputNumber(res){
      //this.number = res;
      //console.log(this.number);
      if(res.value == null || res.value == ''){
        res.value = res.defaultValue;
      }
      // console.log(res);
    },

    test(tt, aa) {
      console.log(tt, aa);
    },
    //清除选中的行数据
    selsChange() {
      this.$refs.table.clearSelection();
    },
    //打开上传图片
    async putImage(url, row) {
      this.importImageUrl = url + row.id;
      this.openImageDaoRu = true;
    },
    //上传图片
    async submitUpload() {
      if (this.$refs.file.files.length != 1) {
        this.$message.warn("请选择一张图片");
      } else {
        let formData = new FormData(); // 创建formdata来存文件
        let file = this.$refs.file.files[0];

        formData.append("file", file); // 存入文件
        formData.append("orgId", this.orgData.orgType); //存入需要上传得数据
        // console.log(formData.get("file"));  // 查看formData里面的设置的参数
        const { data: res } = await this.$http.post(
          "/api" + this.importImageUrl,
          formData,
          {
            headers: { "Content-Type": "multipart/form-data" }
          }
        );
        if (res.result) {
          this.$message.success(res.msg); // 上传成功
          this.openImageDaoRu = false; // 关闭对话框
          let btn = {
            type: "refresh"
          };
          this.$emit("commonClick", btn);
        } else {
          this.$message({
            dangerouslyUseHTMLString: true,
            type: "error",
            message: res.msg
          });
        }
      }
    },
    //放大图片
    openImage(image, row) {
      this.imgUrl = image;
      this.clearImgId = row.id;
      this.imageCon = true;
      console.log(image);
    },
    //删除图片
    async clearImage(id) {
      let { data: res } = await this.$http.get(
        "/api/deleteImage?detailId=" + this.clearImgId
      );
      if (res.result) {
        console.log(res);
        this.$message.success(res.msg);
        this.imageCon = false;
        let btn = {
          type: "refresh"
        };
        this.$emit("commonClick", btn);
      } else {
        this.$message.warn(res.msg);
      }
    },
    //判断排产状态
    cellStyle({ row, column, rowIndex, columnIndex }) {
      if (this.sateColor != null) {
        if (column.property == this.sateColor.paramName) {
          let name = this.sateColor.paramName;
          switch (row[name]) {
            case "未确认":
            case "未开工":
            case "未处理":
              return "color: #666"; //灰色
              break;

            case "工艺确认":
            case "质检确认":
            case "已开工":
              return "color: #FFC20D"; //黄色
              break;

            case "计划确认":
            case "在制中":
            case "待完工":
            case "已受理":
              return "color: #F16306"; //橙色
              break;

            case "待完工":
            case "计划确认":
            case "逾期完工":
            case "逾期未完工":
              return "color: #823DBF"; //紫色
              break;

            case "完结订单":
            case "已完结":
              return "color: #15BF4F"; //绿色
              break;

            case "车间确认":
            case "生产完工":
            case "工序完工":
            case "开工中":
              return "color: #0080CF"; //蓝色
              break;

            case "停工":
            case "已挂起":
              return "color: #A41A11"; //红色
              break;
          }
        }
      }
    },
    selectSatetColor() {
      var sateC = {
        paramName: "",
        actionValue: "",
        colorItems: []
      };
      if (this.tableHeader) {
        this.tableHeader.forEach(item => {
          if (item.type == "textColor") {
            (sateC.paramName = item.paramName),
              (sateC.actionValue = item.actionValue),
              (sateC.colorItems = item.colorItems);
          }
        });
      }
      this.sateColor = sateC;
    },
    // 默认选中第一组数据
    start() {
      if (this.model == 0 && this.formTable.tableData.length != 0) {
        this.$refs.table.setCurrentRow(this.formTable.tableData[0], true);
        this.rowIndex = 0;
        let row = this.formTable.tableData[this.rowIndex];
        console.log(row);
        this.$emit("rowClick", row, this.rowIndex);
      }
    },
    // 【填充按钮】的点击事件
    fillClick() {
      console.log(this.lotFillParam);
      console.log(this.lotFillValue);
      console.log(this.selectRowList);
      if (this.selectRowList.length == 0) {
        this.$message.error("请选择需要填充的行数据");
        return;
      // } else if (!this.lotFillParam || !this.lotFillValue) {
      } else if (!this.lotFillParam || this.lotFillValue == null) {
        this.$message.error("请填写填充数据");
        return;
      }
      // 对于类型是 带出数据输入框的
      else if (this.lotFillParam.type == "dataSelect") {
        // 当前选中的字段存在关联字段
        // if (this.lotFillParam.unActionValue !== null) {
        //   this.unActionValue = this.lotFillParam.unActionValue;
        //   let title = this.tableHeader.find((key) => key.paramName == this.unActionValue).title;
        //   // 选中的行数据里面是否存在【生产车间】的值不一致
        //   // 选中行的【生产车间】数据
        //   let values = this.selectRowList.map(item => item[this.unActionValue]);
        //   let paramNameSet = [...new Set(values)]; // Set会过滤掉重复的数据
        //   if (paramNameSet.length > 1) {
        //     this.$message.error("所选行数据【" + title + "】值存在不一致");
        //     return;
        //   }
        //   // 若所选行的关联字段为空
        //   else if (paramNameSet[0] == "" || paramNameSet[0] == null) {
        //     this.$message.error("关联值【" + title + "】不能为空");
        //     return;
        //   }
        //   // 选中行的关联字段的值 与 弹窗带出的字段值 不相等的话
        //   else if (paramNameSet[0] !== this.lotFillValue[this.unActionValue]) {
        //     this.$message.error("所选行数据【" + title + "】值不一致");
        //     return;
        //   }
        // }

        // 遍历选择的行数据
        this.selectRowList.forEach(item => {
          // 遍历表格数据 对选中的表格数据进行修改
          this.formTable.tableData.forEach((item1, index1) => {
            if (item == item1) {
              for (let i in this.tableHeader) {
                if (this.tableHeader[i].actionValue == this.fillActionValue) {
                  // teamId = id        teamName = name
                  for (let k in this.lotFillValue) {
                    if (k == this.tableHeader[i].lockId) {
                      this.formTable.tableData[index1][
                        this.fillActionValue
                      ] = JSON.parse(JSON.stringify(this.lotFillValue[k]));
                    }
                    if (k == this.tableHeader[i].lockName) {
                      this.formTable.tableData[index1][
                        this.tableHeader[i].paramName
                      ] = this.lotFillValue[k];
                    }
                  }
                }

                // 相反
                if (
                  this.tableHeader[i].notAffectValue == this.fillActionValue
                ) {
                  // teamId = id teamName = name
                  for (let k in this.lotFillValue) {
                    if (k == this.tableHeader[i].lockId) {
                      this.formTable.tableData[index1][
                        this.tableHeader[i].actionValue
                      ] = 0;
                    }
                    if (k == this.tableHeader[i].lockName) {
                      this.formTable.tableData[index1][
                        this.tableHeader[i].paramName
                      ] = "";
                    }
                  }
                }
              }
            }
          });
        });
      } else if (this.lotFillParam.type == "dateRange") {
        // 遍历选择的行数据
        this.selectRowList.forEach(item => {
          // 遍历表格数据 对选中的表格数据进行修改
          this.formTable.tableData.forEach((item1, index1) => {
            if (
              item == item1 &&
              this.formTable.tableData[index1][
                this.lotFillParam.paramName
              ][0] != "false"
            ) {
              this.formTable.tableData[index1][
                this.lotFillParam.paramName
              ] = JSON.parse(JSON.stringify(this.lotFillValue));
            }
          });
        });
      }
      // 普通类型输入框 的
      else {
        // 遍历选择的行数据
        this.selectRowList.forEach(item => {
          // 遍历表格数据 对选中的表格数据进行修改
          this.formTable.tableData.forEach((item1, index1) => {
            if (item == item1) {
              if(this.lotFillParam.type == "select"){
                this.formTable.tableData[index1][
                  this.lotFillParam.actionValue
                ] = JSON.parse(JSON.stringify(this.lotFillValue));
                this.formTable.tableData[index1][
                  this.lotFillParam.paramName
                ] = JSON.parse(JSON.stringify(this.lotFillValue));
              }else{
                this.formTable.tableData[index1][
                this.lotFillParam.paramName
                ] = JSON.parse(JSON.stringify(this.lotFillValue));
              }
            }
          });
        });
      }
      // console.log(this.tableData);
      // console.log(this.formTable.tableData);
      this.$message.success("填充成功");
    },
    // 填充字段的选择
    lotFillChange() {
      console.log(this.lotFillParam);
      this.lotFillValue = null;
      this.lotFillValueFS = null;
    },
    // 监听表格中【多选按钮】的选中
    selectTdClick(selection, row) {
      //console.log(row); // 当前被选中的全部行数据 {对象型}
      // console.log(selection); // 当前选中的值 [数组型]

      this.selectRowList = selection;
      this.$emit("selectTdClick", selection);
    },
    // 表格的全选按钮
    selectAllClick(row) {
      // console.log(row); //数组型
      this.$emit("selectTdClick", row);
      this.selectRowList = row;
    },
    // 行被点击时,将行数据传递给父组件  // 单点
    rowClick(row) {
      let rowIndex = null; // 选中点击的是哪行
      this.formTable.tableData.forEach((item, index) => {
        if (item == row) {
          rowIndex = index;
        }
      });
      console.log(row);
      console.log(rowIndex);
      this.$emit("rowClick", row, rowIndex);
    },
    // 双击行数据的时候
    // rowDblclick(row) {
    //   // this.$emit("rowDblclick", row,this.model, );
    // },

    // 更换页码返回顶部
    toScrollTop() {
      this.$nextTick(() => {
        this.$refs.table.bodyWrapper.scrollTop = 0;
      });
    },

    changeTableClick($event, item, index, row) {
      // console.log($event, item, index, row);
      console.log($event);
      console.log(item);
      console.log(index);
      console.log(row);
      this.formTable.tableData[index][item.actionValue] = $event;
    },

    // 表格行 打开小窗口之前 获取弹窗相关数据 (单选)
    async openDialog(item, index, row) {
      console.log(row);
      console.log(item);
      if (item.type == "baseSelect") {
        this.baseSelectUrl = item.quickUrl;
        this.baseSelectName = item.paramName;
      }

      this.rowIndex = index;
      this.actionValue = item.actionValue;
      this.operateType = item.operateType; //标记下拉多选
      this.synValue = item.synValue; // 标识弹出选中返回字段后进行数据请求
      // 判断是否存在关联字段，请先填写关联字段内容
      if (item.unActionValue != null && row) {
        this.unActionValue = item.unActionValue;
        this.paramValue = row[this.unActionValue];
        let title = this.tableHeader.find(
          key => key.paramName == this.unActionValue
        ).title;
        // 判断关联值是否为空
        if (this.paramValue == null || this.paramValue == "") {
          this.$message.error("请先填选【" + title + "】");
          return;
        }
        if (this.actionValue == "employeeId") {
          this.unActionValue = "departmentName";
        }
      }

      //this.openDialogVisible = true; // 打开小弹窗
      let res = null;
      if (item.actionValue == "groupId") {
        let { data: res1 } = await this.$http.get("/api/" + item.actionUrl, {
          params: {
            groupId: 0
          }
        });
        res = res1;
        this.openDialogVisible = true; // 打开小弹窗
      } else if (item.actionValue == "craftRouteId") {
        let { data: res1 } = await this.$http.get("/api/" + item.actionUrl, {
          params: {
            orgId: this.orgData.orgType,
            itemId: row.id
          }
        });
        res = res1;
        this.openDialogVisible = true; // 打开小弹窗
      } else if (item.actionValue == "assistTeamId") { //打开协助班组
        this.auxiliaryTeamIds =  row.assistTeamId;
        this.auxiliaryTeamItem = [];
        let { data: resAssist } = await this.$http.get("/api/" + item.actionUrl+row.id, {
          params: {
            orgId: this.orgData.orgType,
            selectIds: this.auxiliaryTeamIds
          }
        });
        this.auxiliaryTeamList = resAssist.selectItems;
        this.dialogTitle = resAssist.menuName;
        this.openDialogAssist = true; // 打开协助班组小弹窗
        res = resAssist;
        this.auxiliaryTeamList.forEach((item, index) => {
          if(item.selected){
            this.auxiliaryTeamItem.push(item);
          }
        });
        console.log(this.auxiliaryTeamItem);
      } else {
        let { data: res1 } = await this.$http.get("/api/" + item.actionUrl, {
          params: {
            orgId: this.orgData.orgType
          }
        });
        res = res1;
        this.openDialogVisible = true; // 打开小弹窗
      }
      
      if (res.result) {
        if(item.actionValue != "assistTeamId"){
          if (res.dataId != undefined) {
            this.dataId = res.dataId;
          }
          this.actionObj = res.obj;
          this.dialogTitle = res.obj.menuName;
          if (res.obj.openType == "typeManage") {
            this.$set(this.actionObj, "addUrl", res.addUrl);
            this.$set(this.actionObj, "editUrl", res.editUrl);
          }
        }
      } else {
        this.$message.error(res.msg);
      }
    },

    //baseSelect重新请求selectItem数据
    async baseSelectGet() {
      let { data: res } = await this.$http.get("/api/" + this.baseSelectUrl, {
        params: {
          orgId: this.orgData.orgType
        }
      });

      if (res.result) {
        this.tableHeader.forEach(item => {
          if (item.paramName == this.baseSelectName) {
            item.selectItems = res.list;
          }
        });
        //console.log(this.tableHeader.params);
      }
    },

    // 获取到焦点的时候获取带出数据的url
    focusInput(item, index) {
      console.log(item, index);

      this.quickUrl = item.quickUrl;

      this.rowIndex = index;
      this.actionValue = item.actionValue;
    },

    // 【远程搜索下拉数据】
    async remoteMethod(queryString) {
      console.log(queryString);
      console.log(this.quickUrl);

      this.loading = true;
      let { data: res } = await this.$http.get(
        "/api/" + this.quickUrl + queryString,
        {
          params: {
            orgId: this.orgData.orgType
          }
        }
      );
      if (res.result) {
        this.loading = false;
        this.selectHeader = res.obj.titleParam;
        this.options = res.obj.items;
      } else {
        this.$message.error(res.msg);
      }
    },

    // 下拉框显示/隐藏的时候
    visibleChange(k) {
      if (!k) {
        this.selectHeader = [];
        this.options = [];
      }
    },
    returnquickData(rowdata) {
      console.log(rowdata);
      this.formTable.tableData[this.rowIndex].serialNumber =
        rowdata.serialNumber;
    },

    // 【明细部分】 返回数据
    returnData(rowdata) {
      console.log(rowdata);
      console.log(this.tableHeader);
      console.log(this.actionValue);
      console.log(this.formTable.tableData);

      // 先去遍历点击的该行数
      if (this.actionValue == "verifyProjectId") {
        for (let i in this.tableHeader) {
          if (this.tableHeader[i].actionValue == this.actionValue) {
            // teamId = id        teamName = name
            for (let k in rowdata) {
              if (k == this.tableHeader[i].lockId) {
                this.formTable.tableData[this.rowIndex][this.actionValue] =
                  rowdata[k];
              }
              if (k == this.tableHeader[i].lockName) {
                this.formTable.tableData[this.rowIndex][
                  this.tableHeader[i].paramName
                ] = rowdata[k];
              }
            }
          }
          if (this.tableHeader[i].linkType == "dataSelectEdit") {
            for (let k in rowdata) {
              if (k == this.tableHeader[i].actionValue) {
                this.formTable.tableData[this.rowIndex][k] = rowdata[k];
              }
              if (k == this.tableHeader[i].paramName) {
                this.formTable.tableData[this.rowIndex][
                  this.tableHeader[i].paramName
                ] = rowdata[k];
              }
            }
          }
        }
      } else if(this.actionValue == "assistTeamId"){

        for (let i in this.tableHeader) {
          if (this.tableHeader[i].actionValue == this.actionValue) {
            for (let k in rowdata) {
                this.formTable.tableData[this.rowIndex][this.actionValue] =
                  rowdata.id;
                this.formTable.tableData[this.rowIndex][this.tableHeader[i].paramName] = 
                rowdata.name;
            }
          }
        }

      } else {
        for (let i in this.tableHeader) {
          if (this.tableHeader[i].actionValue == this.actionValue) {
            // teamId = id        teamName = name
            for (let k in rowdata) {
              if (k == this.tableHeader[i].lockId) {
                this.formTable.tableData[this.rowIndex][this.actionValue] =
                  rowdata[k];
              }
              if (k == this.tableHeader[i].lockName) {
                this.formTable.tableData[this.rowIndex][
                  this.tableHeader[i].paramName
                ] = rowdata[k];
              }
            }
          }

          // 相反
          if (this.tableHeader[i].notAffectValue == this.actionValue) {
            // teamId = id teamName = name
            for (let k in rowdata) {
              if (k == this.tableHeader[i].lockId) {
                this.formTable.tableData[this.rowIndex][
                  this.tableHeader[i].actionValue
                ] = 0;
              }
              if (k == this.tableHeader[i].lockName) {
                this.formTable.tableData[this.rowIndex][
                  this.tableHeader[i].paramName
                ] = "";
              }
            }
          }
        }
      }

      console.log(this.formTable.tableData);
      this.openDialogVisible = false;
      this.actionObj = null;
      // 检验单模块
      if (this.synValue == "qualitySchemeId") {
        this.$emit("getOtherItems", rowdata);
      }
    },

    // 关闭对话框模块
    dialogBeforeClose() {
      this.openDialogVisible = false;
      this.openDialogAssist = false;
      this.unActionValue = "";
      this.paramValue = "";
      this.actionObj = null;
      if (this.baseSelectUrl) {
        this.baseSelectGet();
      }
    },
    dialogBeforeClose1() {
      this.fillopenDialogVisible = false;
      this.actionObj = null;
    },

    // 新增一行
    addRow() {
      console.log(this.tableHeader);
      let addrowItem = {};
      this.tableHeader.forEach((item, index) => {
        if (item.type == "dataSelect" || item.type == "select") {
          addrowItem[item.actionValue] = null;
          addrowItem[item.paramName] = null;
        } else if (item.type == "radio") {
          addrowItem[item.paramName] = 0;
        } else {
          addrowItem[item.paramName] = null;
        }
      });
      this.formTable.tableData.push(addrowItem);
      // this.tableData.push(addrowItem);
      // this.editRow(0,'add');
    },

    // 复制
    copyRow() {
      let list = {};
      if (this.selectRowList.length == 0) {
        this.$message.error("请选择需要复制的行数据!");
      } else {
        this.selectRowList.forEach((item, index) => {
          list = this.selectRowList[index];
          list.id = 0;
          this.formTable.tableData.push(JSON.parse(JSON.stringify(list)));
          // this.tableData.push(JSON.parse(JSON.stringify(list)));
        });
        // this.editRow(0,'copy');
      }
    },

    // 删除
    deleteRow() {
      if (this.selectRowList.length == 0) {
        this.$message.error("请选择需要删除的行数据!");
      } else {
        this.$confirm("即将删除所选中的行数据?", "⚠警告", {
          confirmButtonText: "确认",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            // let index =  0;
            this.selectRowList.forEach(item => {
                this.formTable.tableData.splice(
                  this.formTable.tableData.findIndex(item1 => item == item1),
                  1
                );
                // this.tableData.splice(
                //   this.tableData.findIndex(item1 => item == item1),
                //   1
                // );
                // index++;
            });
            // console.log(this.formTable.tableData);
            // this.editRow(index,'delete');
          })
          .catch(() => {});
      }
    },

    // 批量填充的数据带出
    focusFilter() {
      this.fillQuickUrl = this.lotFillParam.quickUrl;
      this.fillActionValue = this.lotFillParam.actionValue;
    },
    //  批量填充=【远程搜索下拉数据】
    async remoteFilMethod(queryString) {
      console.log(queryString);
      console.log(1111);

      this.loading = true;
      let { data: res } = await this.$http.get(
        "/api/" + this.fillQuickUrl + queryString,
        {
          params: {
            orgId: this.orgData.orgType
          }
        }
      );
      console.log(res);

      if (res.result) {
        this.loading = false;
        console.log(res.obj.titleParam);

        this.selectHeader = res.obj.titleParam;
        this.options = res.obj.items;
      } else {
        this.$message.error(res.msg);
      }
    },
    // 批量小弹窗数据
    async openDialog1(item) {
      console.log(item);

      // item = lotFillParam 为选中的查询的字段值
      this.fillActionValue = item.actionValue; // 存储关联的值
      if (item.unActionValue != null && item.type != "baseSelect") {
        if (this.selectRowList.length == 0) {
          this.$message.error("存在关联字段，请先选择需要填充的行数据");
          return;
        }
        this.unActionValue = item.unActionValue;
        // title 关联的字段名称
        let title = this.tableHeader.find(
          key => key.paramName == this.unActionValue
        ).title;
        // 选中的行数据里面是否存在【生产车间】不一致
        let values = this.selectRowList.map(e => e[this.unActionValue]);
        let paramNameSet = [...new Set(values)];
        // 所选的行数据关联值不一致
        if (paramNameSet.length > 1) {
          this.$message.error("所选行数据【" + title + "】值存在不一致");
          return;
        }
        // 所选的行数据的关联值为空
        else if (paramNameSet[0] == " " || paramNameSet[0] == null) {
          this.$message.error("关联值【" + title + "】不能为空");
          return;
        }
        this.paramValue = paramNameSet[0]; // 拿到关联字段的值
        if (this.fillActionValue == "employeeId") {
          this.unActionValue = "shopName";
        }
      }

      this.fillopenDialogVisible = true; // 打开对话框
      let { data: res } = await this.$http.get("/api/" + item.actionUrl, {
        params: {
          orgId: this.orgData.orgType
        }
      });
      if (res.result) {
        if (res.dataId != undefined) {
          this.dataId = res.dataId;
        }
        this.actionObj = res.obj;
        this.dialogTitle = res.obj.menuName;
      } else {
        this.$message.error(res.msg);
      }
    },
    // 批量填充对话框的回填
    returnData1(rowdata) {
      this.lotFillValueFS = rowdata.name;
      this.lotFillValue = rowdata;
      this.fillopenDialogVisible = false;
      this.actionObj = null;
      // console.log(this.lotFillValue);
    },

    // 【筛选】
    //选中筛选条件的事件
    selectChange(data) {
      // 拼接当前字段的 筛选提交
      let property = data["property"];
      let selectList = data["selectList"]; // 选中的字段
      this.$set(this.rules, property, selectList);
      // 重新遍历表格的数据
      this.formTable.tableData = this.tableData;
      // 遍历过滤条件
      let items = [];
      // 遍历所有条件
      for (let key in this.rules) {
        let itemsList = [];
        for (let index in this.rules[key]) {
          items = this.formTable.tableData.filter(item => {
            return item[key] == this.rules[key][index];
          });
          itemsList = itemsList.concat(items);
        }

        this.formTable.tableData = JSON.parse(JSON.stringify(itemsList));
      }
      this.resetCheckList();
    },

    // 筛选的【重置】事件
    resetChange(data) {
      console.log('筛选的【重置】事件');
      // 清空当前字段的筛选条件
      delete this.rules[data["property"]];
      this.formTable.tableData = this.tableData;
      // 再次遍历过滤条件
      let items = [];
      for (let key in this.rules) {
        let itemsList = [];
        for (let index in this.rules[key]) {
          items = this.formTable.tableData.filter(item => {
            return item[key] == this.rules[key][index];
          });
          itemsList = itemsList.concat(items);
        }
        this.formTable.tableData = JSON.parse(JSON.stringify(itemsList));
      }
      this.resetCheckList();
    },

    // 重新计算字段里面的每个字段的过滤条件
    resetCheckList() {
      for (let k in this.checkList) {
        // 如果表格中存在没有于当前选中的过滤字段一致的，就说明当前的过滤不包涵该字段
        // 重置多选条件
        if (!this.rules.hasOwnProperty(k)) {
          this.checkList[k].length = 0;
        }
      }
      for (let i in this.formTable.tableData) {
        for (let k in this.formTable.tableData[i]) {
          if (!this.rules.hasOwnProperty(k)) {
            if (
              this.checkList[k].findIndex(
                item => item == this.formTable.tableData[i][k]
              ) == -1
            ) {
              this.checkList[k].push(this.formTable.tableData[i][k]);
            }
          }
        }
      }
    },

    // 跳转行数据，更新行数据的选中状态（高亮）和修改 rowIndex
    toLineMethod() {
      let row = this.formTable.tableData[this.rowIndex];
      this.$nextTick(() => {
        this.$refs.table.setCurrentRow(
          this.formTable.tableData[this.rowIndex],
          true
        );
      });
      this.$emit("rowClick", row, this.rowIndex);
    },

    //打开选择显示字段弹框方法
    OpenField() {
      this.$refs.field.checkeField();
    },
    //自动折行
    AutoRows() {
      this.maxRow = !this.maxRow;
    },
    // 刷新事件
    commonClick(refresh) {
      // let btn = {
      //       type: "refresh"
      //     };
      this.$emit("commonClick", refresh); //将点击的按钮信息传递给父组件
    },
    //新增检验项目使用父组件方法
    newChatProtect() {
      this.$emit("newChatProtect");
    }
  }
};
</script>
<style scoped>
.tableContain {
  width: 100%;
  height: 100%;
}

.tableContain p {
  width: 100%;
  height: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.tableContain .editInput {
  background-color: #eefefe;
}

.btnList {
  display: flex;
  height: 30px;
  align-items: center;
  margin-bottom: 3px;
}

.btnList div {
  margin-left: 30px;
}

.star {
  padding-right: 5px;
  color: red;
  font-size: 18px;
}

.selectHeaderClass,
.selectTd {
  min-width: 120px;
  height: 100%;
  flex: 1;
  display: flex;
  align-items: center;
  padding: 0 5px;
  box-sizing: border-box;
  border-right: 1px solid #333;
  flex-shrink: 0;
  /**0 不缩小  1 缩小 */
  flex-grow: 1;
  /**0 不放大  1 放大 */
  overflow: hidden;
  /*溢出隐藏*/
  white-space: nowrap;
  /*溢出不换行*/
  text-overflow: ellipsis;
  /*文字超出宽度则显示ellipsis省略号*/
}

.selectHeaderClass:last-child {
  border: none;
}

.selectTd:last-child {
  border: none;
}

.headerTr {
  width: 100%;
  height: 24px;
  font-size: 13px;
  display: flex;
  background-color: #eeeeee;
  position: sticky;
  top: 0;
  z-index: 99;
}

.selectTr {
  height: 100%;
  display: flex;
}

.optionContain {
  padding: 0 !important;
  font-size: 12px !important;
}

.searchIcon {
  position: absolute;
  /* right: 0px; */
  top: 50%;
  transform: translate(0, -50%);
  color: #30a7d6;
  font-weight: 700;
  font-size: 20px;
}

.filterBox {
  width: 100%;
  margin: 5px 0;
  box-sizing: border-box;
  box-shadow: 0px 0px 5px #bbb;
  background-color: #eee;
  padding: 10px;
  display: flex;
}
</style>
<style>
.dateRange .el-input__icon {
  display: none !important;
}
.dateRange span {
  display: none !important;
}
.rowArea textarea {
  height: 20px !important;
}
.plInput .el-range-editor .el-range-input {
  background-color: #f5f7fa;
}
.el-table .cell {
  white-space: nowrap;
  width: fit-content;
}

.tableContain .tableLineClass .el-table .el-table__cell {
  color: #1f1c1c;
  padding: 6px 0;
  box-sizing: border-box;
}

.tableContain .tableLineClass .el-input.is-disabled .el-input__inner {
  background-color: #e8ecf3;
}

.tableContain .tableLineClass .el-table .cell {
  font-size: 14px;
  /* padding: 0 5px; */
  height: 30px;
  line-height: 30px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 100% !important;
  height: 100% !important;
}

.tableContain .tableLineClass .el-autocomplete {
  width: 100%;
  /* 下拉选择、带出框的大小*/
}

.tableContain .tableLineClass .el-input__inner {
  width: 100%;
  height: 30px;
  border: none;
  padding: 0 5px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  box-sizing: border-box;
  color: #444547 !important;
}

/* 表格单元格 溢出提示 */
.el-tooltip__popper {
  max-width: 150px;
}

.tableContain .tableLineClass .el-table__empty-text {
  font-size: 18px;
  font-weight: 700;
}

.tableFormClass .tableLineClass .cell .el-form-item {
  width: 100%;
  margin: 0;
}

.tableFormClass .tableLineClass .cell .el-form-item__content {
  width: 100% !important;
  height: 100% !important;
}

.tableFormClass .tableLineClass .cell .el-input--mini,
.tableFormClass .tableLineClass .cell .el-input-number--mini {
  width: 100%;
  height: 100%;
}

/* 小数输入框的 调节器 */
.tableFormClass
  .tableLineClass
  .el-input-number--mini
  .el-input-number__decrease,
.tableFormClass
  .tableLineClass
  .el-input-number--mini
  .el-input-number__increase {
  width: 20px;
  background-color: #fff;
}

.tableFormClass .tableLineClass .el-table__row {
  height: 50px !important;
}

.tableFormClass .tableLineClass .el-table__row td {
  padding: 0 !important;
}

.tableContain .inputText {
  width: 180px;
}
 .el-checkbox__inner {
       width: 20px;
       height: 20px;
}
 
.el-checkbox__inner::after {
        border: 3px solid #fff;
        border-left: 0;
        border-top: 0;
        left: 5px;
        top: 5px;
}
 
.el-checkbox__input.is-checked .el-checkbox__inner::after {
        transform: rotate(50deg) scaleY(1.3);
 }
 .buttomBox {
  width: 100%;
  height: 32px;
  margin-top: 2px;
  display: flex;
}
</style>